/**
 * 异步设置首页时间显示
 */
(function curDate() {
  // 1.找目标
  let dateSpan = document.querySelector(".top-nav > span");
  // 2.算法实践 : 获取当日期：格式“2024年10月8日 星期二“
  let myDate = new Date();
  let year = myDate.getFullYear();
  let month = myDate.getMonth() + 1;
  let date = myDate.getDate();
  let day = myDate.getDay();
  let strDay = ["日", "一", "二", "三", "四", "五", "六"];
  let strDate = `${year}年${month}月${date}日 星期${strDay[day]}`;
  // 3.控制DOM元素 textContent 或者 innerHTML
  dateSpan.textContent = strDate;
})();

/**
 * 导航菜单中的样式控制
 */
(function navChange() {
  //1.找目标
  /**@type {HTMLElement} */
  let target = document.querySelector("nav");
  /**@type {HTMLElement} */
  let homePage = document.querySelector("nav li a");
  //2.算法实践：事件委托
  target.onmouseover = function (e) {
    /**@type {HTMLElement} */
    let choiceElement = e.target;
    if (choiceElement.innerHTML !== homePage.innerHTML) {
      homePage.style.color = "#333";
      homePage.style.backgroundColor = "transparent";
    }
  };

  target.onmouseout = function (e) {
    homePage.style.color = "#fff";
    homePage.style.backgroundColor = "#89211b";
  };
  //3.设置DOM元素
})();

/**
 * 宣传图片的轮播控制
 */
(function bannerMove() {
  //1. 找目标
  /** @type {HTMLElement} */
  let target = document.querySelector(".banner ul");
  /** @type {HTMLElement} */
  let prev = document.querySelector("a.prev");
  /** @type {HTMLElement} */
  let next = document.querySelector("a.next");
  // 2. 算法实践：
  // 定时器控制自动移动，需要处理鼠标的相关事件
  let timer = null;
  let delayTime = 6000; //1s

  function leftMove() {
    /** @type {HTMLElement} */
    let viewElement = target.children[0];
    viewElement.style.marginLeft = "0";
    viewElement.style.transition = "margin-left 4s";
    //形成循环：最后一个移动到第一个
    /** @type {HTMLElement} */
    let lastLi = target.lastElementChild;
    lastLi.style.marginLeft = "-120rem";
    target.insertBefore(lastLi, target.firstElementChild);
  }

  function rightMove() {
    /** @type {HTMLElement} */
    let viewElement = target.children[1];
    viewElement.style.marginLeft = "-120rem";
    viewElement.style.transition = "margin-left 4s";
    //形成循环：第一个移动到最后一个
    /** @type {HTMLElement} */
    let firstLi = target.firstElementChild;
    firstLi.style.marginLeft = "0";
    target.append(firstLi);
  }

  // 自动播放
  if (target.childElementCount > 1) {
    timer = setInterval(rightMove, delayTime);
  }

  // 鼠标的控制
  prev.onmouseover = next.onmouseover = function () {
    clearInterval(timer);
  };

  prev.onmouseout = next.onmouseout = function () {
    timer = setInterval(rightMove, delayTime);
  };

  prev.onclick = function () {
    leftMove();
  };

  next.onclick = function () {
    rightMove();
  };
})();

/**
 * 专题网站的图片移动
 */
(function topicMove() {
  //定位来实现移动的控制
  // 容器
  /** @type {HTMLElement} */
  let topicArticle = document.querySelector(".topic article");
  // 移动的内容
  /** @type {HTMLElement} */
  let topicUl = document.querySelector(".topic article ul");

  //定义定时器
  let delayTime = 500;
  let timer = setInterval(move, delayTime);
  let speed = 10;
  // 使用CSS3的过渡来控制移动的效果
  topicUl.style.transition = "left 0.2s linear";

  // 鼠标事件控制
  topicArticle.onmouseover = function () {
    clearInterval(timer);
  };

  topicArticle.onmouseout = function () {
    timer = setInterval(move, delayTime);
  };

  // 移动的方法：边界碰撞控制
  function move() {
    // position的left来控制
    if (topicUl.offsetLeft >= 0) {
      speed *= -1;
    }
    if (topicUl.offsetLeft + topicUl.scrollWidth <= topicArticle.offsetWidth) {
      speed *= -1;
    }

    //移动：改变left的值
    topicUl.style.left = `${topicUl.offsetLeft + speed}px`;
  }
})();